/* eslint-disable react-refresh/only-export-components */
import React from "react";
import { useLoaderData, useSearchParams } from "react-router-dom";
import { getDetail } from "../../api/info";
import Navbar from "../../components/navbar";
import Navdate from "../../components/navdate";
import styles from "./css/train.module.css";
import TicketCard from "./components/TicketCard";
import Collapses from "./components/Collapse";
function Detail() {
  const { info } = useLoaderData();
  let [sp] = useSearchParams();
  return (
    <div className={styles.top}>
      <Navbar title={info.trainNo} />
      <Navdate date={sp.get("date")} />
      <TicketCard {...info} />
      <Collapses {...info} />
    </div>
  );
}

export default Detail;
export const loader = async ({ params, request }) => {
  const id = params.id;
  const url = new URL(request.url);
  const obj = Object.fromEntries(url.searchParams);
  const { data: res } = await getDetail(id, obj);

  return { info: res };
};
